<template>
  <el-row :style="{width: field.column_width || '220px'}">
    <el-col :span="12">
      <el-text tag="b" type="warning">{{ field.name }}</el-text>
    </el-col>
    <el-col :span="12">
      <el-button size="small" type="info" plain @click="$emit('cancel')">取消</el-button>
      <el-button size="small" type="primary" @click="emits('save', bean)" plain>确定</el-button>
    </el-col>
    <el-col style="margin-top: 8px">
      <m-cell :field="field" :bean="bean" :disabled="disabled" :db="db"></m-cell>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

import MCell from "../../cell/MCell.vue";
import type {DaoTypes, DataItem} from "../../../types/tool/dao.types";
import type {MetaView} from "../../../types/tool/meta.types";
import {computed, onMounted, ref} from "vue";
import _ from "lodash";

const props = defineProps<{
  view: MetaView,
  prop: string,
  bean: DataItem,
  db: DaoTypes,
  disabled?: boolean
}>()

const field = computed(() => {
  const mapping = props.view?.fields || {}
  return mapping[props.prop]
})

const emits = defineEmits(['cancel', 'save'])

onMounted(() => {
  // 确保bean已经正确传入
})


</script>

<style scoped>

</style>